<template>
	<div class="sku-create">
		<el-form
			ref="form"
			:model="item"
			label-width="80px"
			v-for="(item, index) in formList"
			:key="index"
		>
			<el-form-item label="规格名：" style="width: 280px;">
				<el-input
					v-model="formList[index].name"
					size="mini"
					style="width: 120px"
					placeholder="请输入规格名"
					clearable
					@input="onEmit"
				></el-input>
				<el-button type="text" size="mini" @click="onSkuDelete(index)">删除</el-button>
			</el-form-item>
			<el-form-item label="规格值：" style="width: 520px;">
				<template v-for="(skuValue, skuIndex) in formList[index].desc">
					<el-input
						v-model="formList[index].desc[skuIndex].name"
						size="mini"
						style="width: 120px"
						placeholder="请输入规格值"
						clearable
						@input="onEmit"
						:key="'name' + skuIndex"
					></el-input>
					<el-button
						type="text"
						size="mini"
						@click="onValueDelete(index, skuIndex)"
						v-if="formList[index].desc.length > 1"
						style="margin-right: 10px"
						:key="'button' + skuIndex"
						>删除</el-button
					>
				</template>
				<el-button type="text" size="mini" @click="onValueAdd(index)">添加</el-button>
			</el-form-item>
		</el-form>
		<el-button type="primary" size="mini" @click="onSkuAdd()">添加新规格</el-button>
	</div>
</template>

<script>
export default {
	name: 'SkuCreate',
	props: {
		value: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	data() {
		return {
			formList: [],
			isFirst: false
		};
	},
	methods: {
		onSkuAdd() {
			this.formList.push({
				name: '',
				desc: [
					{
						name: ''
					}
				]
			});
			this.onEmit();
			this.$forceUpdate();
		},
		onSkuDelete(index) {
			this.formList = this.formList.filter((item, itemIndex) => {
				if (itemIndex === index) {
					return false;
				} else {
					return true;
				}
			});
			this.onEmit();
			this.$forceUpdate();
		},
		onValueAdd(index) {
			this.formList[index].desc.push({
				name: ''
			});
			this.onEmit();
			this.$forceUpdate();
		},
		onValueDelete(index, skuIndex) {
			this.formList[index].desc = this.formList[index].desc.filter((item, itemIndex) => {
				if (itemIndex === skuIndex) {
					return false;
				} else {
					return true;
				}
			});
			this.onEmit();
			this.$forceUpdate();
		},
		onEmit() {
			if (this.formList.length === 0) {
				this.$emit('input', '');
			} else {
				this.$emit('input', JSON.stringify(this.formList));
			}
		}
	},
	watch: {
		value(val) {
			if (!val) {
				return;
			}
			if (!this.isFirst) {
				this.isFirst = true;
				let formList = [];
				let arr = JSON.parse(this.value);
				if (arr.operate === 'edit') {
					arr.nodes.forEach(item => {
						let desc = [];
						item.desc.split(',').forEach(descItem => {
							desc.push({ name: descItem });
						});
						formList.push({
							name: item.name,
							desc: desc,
							id: item.id
						});
					});
					this.formList = formList;
					this.onEmit();
				}
				// this.onEmit();
			}
		}
	}
};
</script>

<style lang="stylus" scoped>
/deep/.el-form {
    margin-bottom 10px;
    flexBox(flex-start, center)
    .el-form-item {
        width fit-content
        margin-right 10px
        .el-form-item__content {
            width fit-content
            .el-input {
                margin-right 10px;
                margin-bottom 4px
            }
        }
    }
}
</style>
